<template>
  <div>
    <!-- 分组模式 -->
    <div v-if="value.group">
      <el-select v-model="data" :placeholder="value.placeholder" :disabled="value.disabled" :clearable="value.clearable" :multiple="value.multiple" :filterable="value.filterable" :size="value.size">
        <el-option-group v-for="(group,index) in value.options" :key="index" :label="group.title">
          <el-option v-for="(item,key) in group.item" :key="key" :label="item.label" :value="item.value" :disabled="item.disabled">
          </el-option>
        </el-option-group>
      </el-select>
    </div>
    <!-- 非分组模式 -->
    <div v-if="!value.group">
      <el-select v-model="data" :placeholder="value.placeholder" :disabled="value.disabled" :clearable="value.clearable" :multiple="value.multiple" :filterable="value.filterable" :size="value.size">
        <el-option v-for="(item,index) in value.options[0].item" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled">
        </el-option>
      </el-select>
    </div>
  </div>
</template>
<script type="text/javascript">
// import Logo from '~/components/Logo.vue'
export default {
  props: {
    value: [Array, Object]
  },
  components: {
    //Logo
  },
  data() {
    return {
      data: '',
    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {

  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {
    value: {
      handler(val, old) {
        if (val.multiple) {
          this.data = [];
        } else {
          this.data = '';
        }
      },
      deep: true,
    }

    // demo(v) {
    //   console.log("数据监听", v);
    // }
  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {

  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {

  }
}

</script>
<style type="text/css" lang="scss">
</style>
